<template>
  <div class="patient-detail-container">
    <van-nav-bar
      class="app-nav-bar"
      title="就诊人信息"
      left-arrow
      @click-left="$router.back()"
    />
    <van-form @submit="onSubmit">
      <van-field
        v-model="patient.name"
        name="就诊人姓名"
        label="就诊人姓名"
        placeholder="就诊人姓名"
      />

      <van-field
        readonly
        clickable
        name="picker"
        :value="certificateName"
        label="证件类型"
        placeholder="点击选择证件类型"
        @click="showPicker = true"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="certificateColumn"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>

      <van-field
        v-model="patient.certificatesNo"
        name="证件号"
        label="证件号"
        placeholder="证件号"
      />
      <van-field
        v-model="patient.phone"
        name="手机号"
        label="手机号"
        placeholder="手机号"
      />
      <van-field
        v-model="patient.address"
        name="详细住址"
        label="详细住址"
        placeholder="详细住址"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import {mapState} from "vuex";
import patientApi from '@/api/patient'
import dictApi from "@/api/dict"

export default {
  name: "PatientDetailIndex",
  data(){
    return{
      patient:{},
      certificatesTypeList: [],
      certificateName:'',
      certificateColumn:[],
      showPicker: false,
    }
  },
  created() {
    this.init()
  },
  computed:{
    ...mapState(['user'])
  },
  methods:{
    onConfirm(value,index) {
      this.showPicker=false
      this.certificateName = value
      this.patient.certificatesType = this.certificatesTypeList[index].value
    },
    //点击添加就诊人
    async onSubmit(){
      this.patient.userId = this.user.userId
      const {data:res} = await patientApi.add(this.patient)
      if (res.code!==200){
        return this.$notify({type:'danger',message:'添加失败'})
      }
      this.$notify({type:'success',message:'添加成功'})
      //跳转页面
      await this.$router.push("/patient")
    },
    init(){
      this.getCertificateType()
    },
    async getCertificateType(){
      const {data:res} = await  dictApi.dictList(76)
      this.certificatesTypeList = res.data
      res.data.forEach((item,i)=>{
        this.certificateColumn.push(res.data[i].text)
      })
    }
  }
}
</script>

<style scoped>

</style>
